<!--
 * @Author: CoderLPF
 * @Date: 2020-03-17 10:46:12
 * @LastEditTime: 2020-05-05 11:31:58
 * @LastEditors: CoderLPF
 * @Description: 
 * @FilePath: \fzx-system-fd\src\components\base\treeX.vue
 -->
// 基本树组件
<template>
  <div id="treeX">
    <el-card class="box-card" id="tree_content">
      <el-tree
        :data="data"
        highlight-current
        :props="defaultProps"
        @node-click="handleNodeClick"
        icon-class="el-icon-folder-add"
      ></el-tree>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "treeX",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
      key: null
    }
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleNodeClick(data) {
			this.$emit("nodeClick",data);
    }
  }
};
</script>

<style lang="less" scoped>
#treeX {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  color: black;
  height: inherit;
  .el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  }
}

.el-tree-node:focus {
  .el-tree-node__content {
    background-color: #41c7db !important;
    color: white;
  }
}
#tree_content {
  width: inherit;
  height: inherit;
  overflow-y: hidden;
  overflow-x: auto;
}
.el-tree {
  min-width: 100%;
  display: inline-block !important;
}
</style>
